import { globalStyle, style } from '@vanilla-extract/css';
import { knnoButton } from '../../theme/button.css';
import { calendarStyle } from '../calendar/calendar.css';
import { actionStyle } from '../action/action.css';
import { pickerStyle } from '../picker/picker.css';

export const datePickerStyle = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
});

globalStyle(`${datePickerStyle}>${calendarStyle}`, {
	border: 'none',
	outline: 'none',
});

globalStyle(`${datePickerStyle}>${knnoButton}`, {
	margin: '0.5em 1em 0 1em',
});

globalStyle(`${actionStyle} ${datePickerStyle}>${calendarStyle}>div.body`, {
	width: 'auto',
});

globalStyle(`${pickerStyle}.popup`, {
	minWidth: '20em',
	border: 'none',
});
